<template>
    <div class="nav">
        <Breadcrumb>
          <BreadcrumbItem>系统配置</BreadcrumbItem>
          <BreadcrumbItem>业务管控</BreadcrumbItem>
          <BreadcrumbItem>列表</BreadcrumbItem>
        </Breadcrumb>
      </div>
      <div class="tab">
        <Tabs value="name1" :animated="false" style="padding: 10px">

            <TabPane label="调剂业务管控" name="tjyw">
                <div class="gk">
                    <div>
                        
                    </div>
                    <Tabs value="name1" :animated="false" style="padding: 10px">

                        <TabPane label="消息通知" name="xxtz">
                            <div class="">
                                <vxe-grid v-bind="gridOptions1">
                                    
                                </vxe-grid>
                            </div>
                          </TabPane>
                        <TabPane label="规则限制" name="gzxz">
                            <div class="">
                                <vxe-grid v-bind="gridOptions2">
                                    
                                </vxe-grid>
                            </div>
                          </TabPane>
                    </Tabs>
                </div>
              </TabPane>
            <TabPane label="煎药业务管控" name="jyyw">
                <div class="gk">
                    <Tabs value="name1" :animated="false" style="padding: 10px">

                        <TabPane label="消息通知" name="xxtz">
                            <div class="">
                                <vxe-grid v-bind="gridOptions1">
                                    
                                </vxe-grid>
                            </div>
                          </TabPane>
                        <TabPane label="规则限制" name="gzxz">
                            <div class="">
                                <vxe-grid v-bind="gridOptions2">
                                    
                                </vxe-grid>
                            </div>
                          </TabPane>
                    </Tabs>
                </div>
              </TabPane>
            <TabPane label="砂锅煎药业务管控" name="sgjyyw">
                <div class="gk">
                    <Tabs value="name1" :animated="false" style="padding: 10px">

                        <TabPane label="消息通知" name="xxtz">
                            <div class="">
                                <vxe-grid v-bind="gridOptions1">
                                    
                                </vxe-grid>
                            </div>
                          </TabPane>
                        <TabPane label="规则限制" name="gzxz">
                            <div class="">
                                <vxe-grid v-bind="gridOptions2">
                                    
                                </vxe-grid>
                            </div>
                          </TabPane>
                    </Tabs>
                </div>
              </TabPane>
            <TabPane label="制膏业务管控" name="zgyw">
                <div class="gk">
                    <Tabs value="name1" :animated="false" style="padding: 10px">

                        <TabPane label="消息通知" name="xxtz">
                            <div class="">
                                <vxe-grid v-bind="gridOptions1">
                                    
                                </vxe-grid>
                            </div>
                          </TabPane>
                        <TabPane label="规则限制" name="gzxz">
                            <div class="">
                                <vxe-grid v-bind="gridOptions2">
                                    
                                </vxe-grid>
                            </div>
                          </TabPane>
                    </Tabs>
                </div>
              </TabPane>
            <TabPane label="制剂业务管控" name="zjyw">
                <div class="gk">
                    <Tabs value="name1" :animated="false" style="padding: 10px">

                        <TabPane label="消息通知" name="xxtz">
                            <div class="">
                                <vxe-grid v-bind="gridOptions1">
                                    
                                </vxe-grid>
                            </div>
                          </TabPane>
                        <TabPane label="规则限制" name="gzxz">
                            <div class="">
                                <vxe-grid v-bind="gridOptions2">
                                    
                                </vxe-grid>
                            </div>
                          </TabPane>
                    </Tabs>
                </div>
              </TabPane>
            <TabPane label="发药业务管控" name="fyyw">
                <div class="gk">
                    <Tabs value="name1" :animated="false" style="padding: 10px">

                        <TabPane label="消息通知" name="xxtz">
                            <div class="">
                                <vxe-grid v-bind="gridOptions1">
                                    
                                </vxe-grid>
                            </div>
                          </TabPane>
                        <TabPane label="规则限制" name="gzxz">
                            <div class="">
                                <vxe-grid v-bind="gridOptions2">
                                    
                                </vxe-grid>
                            </div>
                          </TabPane>
                    </Tabs>
                </div>
              </TabPane>
        </Tabs>

      </div>

</template>

<script setup>
import { reactive } from 'vue';
const gridOptions1 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,
  
  id: "toolbar_demo_2",
  loading: false,
  columnConfig: {
    resizable: true,
    
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    
    { field: "Interventions", title: "配置", width: 120, align: "center" },
    { field: "date", title: "说明", align: "center" },
    { field: "operate", title: "操作", width: 130, align: "center" },
  ],
  
  data: [
    {
      id: 1,
      name: "陈文婷",
      prescription: "321",
      diagnosis: "肺炎：肺部感染，通常由",
      Department: "--",
      state: 28,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 2,
      name: "吕致盈",
      prescription: "322",
      diagnosis: "胃溃疡：胃黏膜下层或",
      Department: "--",
      state: 22,
      Interventions: "Guangzhou",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    
  ],
});
const gridOptions2 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,
  
  id: "toolbar_demo_2",
  loading: false,
  columnConfig: {
    resizable: true,
    
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    
    { field: "Interventions", title: "配置", width: 120, align: "center" },
    { field: "date", title: "说明", align: "center" },
    { field: "operate", title: "操作", width: 130, align: "center" },
  ],
  
  data: [
    {
      id: 1,
      name: "陈文婷",
      prescription: "321",
      diagnosis: "肺炎：肺部感染，通常由",
      Department: "--",
      state: 28,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 2,
      name: "吕致盈",
      prescription: "322",
      diagnosis: "胃溃疡：胃黏膜下层或",
      Department: "--",
      state: 22,
      Interventions: "Guangzhou",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    
  ],
});
</script>

<style scoped>
.nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    font-size: 20px;
  }
  
  .gk {
    border-left: 5px solid#f5f7f9;
    border-right: 5px solid#f5f7f9;
    background-color: #fff;
    height: 100vh;
    width: 100%;
  }
</style>